AWS App Studioを使用して生成AIを活用したアプリケーション構築

AWS App Studioを使用して生成AIを活用したアプリケーション構築

AWS App Studioは、生成AIを活用したローコードのアプリケーション構築サービスです。ソフトウェア開発の専門知識がなくても、自然言語でアプリケーションの要件を入力するだけで、数分でアプリケーションを作成できます。
Clock Icon2024.12.16

re:invent2024は生成AIのセッションが多くありました。
その中で、AWS App Studio というサービスがありましたので試してみました。

やってみた

AWS App Studio のコンソール -> Get startedを選択します。

app-studio-1

Set up

Set up ではアプリケーションの作成方法を選択します。今回は、Easy create (Recommended for evaluation) を選択しました。Nextを選択します。

  • Standard create:
    • アクセスを管理するために App Studio で IAM Identity Center の既存の組織インスタンスを使用するなど、追加のインスタンス作成オプションを構成するには、このオプションを選択します。
  • Easy create (Recommended for evaluation):
    • App Studio は、この AWS アカウントに必要なサービスを作成します。

app-studio-2

App StudioへのアクセスはAWS IAM Identity Center によるシングルサインオンで管理されます。IAM Identity CenterインスタンスからApp Studioの管理者としてユーザーを選択します。Acknowledgmentでチェックボックスを選択し、Set upを選択します。

app-studio-3
app-studio-4
app-studio-5

セットアップ完了まで少し時間がかかりました。

app-studio-6

App Studioへアクセスします。

app-studio-7

サインインし、MFAの設定を完了します。

app-studio-8

AWS App Studioにサインインできたら早速アプリケーションを作成していきます。

app-studio-9

Builder hubからCreate appを選択します。

app-studio-10

Generate an app with AIを選択します。

app-studio-11

Connect to existing data - optionalSkip、しばらくするとアプリケーション作成ページにいきます。

app-studio-12
app-studio-13

サンプルプロンプトもありますが、作成したいアプリケーション内容をテキストに入力してみました。

app-studio-14

Create an application where employees can upload vacation requests, and an email notification is sent to the administrator upon submission.

プロンプトに変更したいことを入力することで、要件を変更したりしてアプリケーションを改善できます。

The application is in PDF format and I would like to attach the file.

About your appYour requirements, App overview を確認し特に問題ければ、Generate appを選択します。

Preview appでアプリケーション確認できます。

app-studio-15
app-studio-16

また、App Studioはいくつかのセクションに分かれています。

Pages

app-studio-17

UIを作成できます。

Automations

app-studio-18

アクションを定義できます。生成AIアシスタントで構築したため、自動的に作成されていました。

Data

app-studio-19

生成AIによってアプリケーションを作成したので、データエンティティが自動で定義されていました。

Create Connector

アプリケーションを作成しましたが、Errorが発生していました。エラーを確認するとConnectionの設定が必要でしたので、作成していきます。

app-studio-20

Connectors -> Create connectorを選択します。

app-studio-21

Select a connector で必要なAWSサービスや外部サービスを選択します。

app-studio-22
app-studio-23

その前に、IAM Roleが必要なので、IAMコンソールで作成します。例として、SES用のIAM roleを作成します。

IAM -> Roles -> Create role から

app-studio-24

Custom trust policyを以下のように設定します。

Example

{ 
    "Version": "2012-10-17",
    "Statement": [
        { 
            "Effect": "Allow",
            "Principal": { 
                "AWS": "arn:aws:iam::111122223333:root"
            }, 
            "Action": "sts:AssumeRole",
            "Condition": {
                "StringEquals": {
                        "aws:PrincipalTag/IsAppStudioAccessRole": "true",
                        "sts:ExternalId": "11111111-2222-3333-4444-555555555555"
                }
            }
        } 
    ]
}

以下、IDはApp StudioのAccount settingsから確認できす。

  • AWS Account ID:App Studioインスタンスの設定に使用したアカウントのAWSアカウント番号
  • ExternalID: App Studioインスタンスのアカウント設定のチームID

app-studio-25

Add permissionsで権限を追加し

app-studio-26

Add tagsでタグを追加します。Create roleを選択します。

  • Key: IsAppStudioDataAccessRole
  • Value: true

app-studio-27

IAM roleを作成したら、IAM roleのANRをコピーし、Connectors -> Create connectorに戻りSESを使用したいのでOther AWS services connectorを選択します。情報を入力して、Createを選択します。

app-studio-28

必要なConnectorを作成し、エラーを解消させたら右上のPublishを選択します。

app-studio-29

Publish Center で、Testing, Production 環境を確認できます。テストに問題なければ、Publishを選択し本番環境に公開できます。

app-studio-30

まとめ

生成AIを活用したアプリケーション開発サービス、AWS App Studio についてご紹介しました。公開までの方法はわかりましたが、アプリケーションがうまく動作しませんでした。特に Automations のセクションで、アクションの呼び出し周りなど修正が必要そうでした。

参考資料

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.